<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<s:include value="sellerHeader.jsp"></s:include>	
<head>
<!-- 	작성자 :	진승민 
		기능 	:	기능 조합으로 블로그 제작  -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- css 로드 -->
<link rel="stylesheet" media="screen" type="text/css"
	href="/Jangdolbaeng2/css/seller/skin/${shop_blog.blog_style}/bootstrap.min.css" />
<link href="/Jangdolbaeng2/css/customer/common.css" rel="stylesheet">
<!-- script 로드 -->
<script type="text/javascript" src="/Jangdolbaeng2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/Jangdolbaeng2/js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="/Jangdolbaeng2/js/holder.js"></script>
<style type="text/css">
.blogOption {
	width: 1100px;	
}

.preview {
	width: 1100px;
	height: auto;	
}

.shopproductImg {
	max-width: 100%;
}

#div1, #div2, #div3, #div4, #div5 {
	width: 1100px;
	height: auto;
	margin-top: 10px;
	margin-bottom: 10px;
}

#imageSlider {
	width: 1100px;
	margin: 0 auto;
}
/* 슬라이드 외부 박스 디자인 by 기석*/
.imageBox {
	position: relative;
	width: 800px;
	height: 400px;
	overflow: hidden;
}

/* 슬라이드 내부 이미지 설정 by 기석*/
.sliderImage {
	width: 400px;
	height: 250px;
}

/* Slider Text Panel , 나중에 가능하면 추가기능으로 글씨제공 희망사항 by 기석*/
.slider_text_penal {
	position: absolute;
	top: 200px;
	left: 50px;
}

.slider_text {
	position: absolute;
	width: 250px;
	height: 150px;
}

#div3 {
	max-height: 700px;
	height: 600px;
	width: 1100px;
	overflow: auto;
}
</style>
<title>블로그 템플릿</title>
</head>
<body>
<div class="container" style="font-family: anew;">
	<div class="blogOption" align="center" style="padding-left: 200px;">		
			<form  action="BlogSetting" method="post" enctype="multipart/form-data">
				<input type="hidden" id="blog_style" name="shop_blog.blog_style" value="${shop_blog.blog_style}">
				<input type="hidden" id="blog_font" name="shop_blog.blog_font" value="${shop_blog.blog_font}">
				<input type="hidden" id="blog_bgcolor" name="shop_blog.blog_bgcolor" value="${shop_blog.blog_bgcolor}">				
				<input type="hidden" id="blog_slider" name="shop_blog.blog_slider" value="${shop_blog.blog_slider}">
				<input type="hidden" id="blog_map" name="shop_blog.blog_map" value="${shop_blog.blog_map}">
				<ul class="nav nav-pills justfied">
					<!-- 대문 선택-->
					<li><a>대문 사진</a></li>
					<li><a><input type="file" id="imgInp" name='upload'></a></li>
					<!-- 스킨 선택 : 해당 스킨시 배경색 아쿠아-->
					<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">스킨<span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
						<s:iterator value="skinList" var="skins">
						<s:if test='%{#skins ==shop_blog.blog_style}'>						
							<li><a 	class="blogSkin" style="background: aqua;"><s:property /></a></li>
						</s:if>
						<s:else>
							<li><a 	class="blogSkin" ><s:property /></a></li>
						</s:else>						
						</s:iterator>							
						</ul>
					<!-- 글씨체 선택-->
					<li class="dropdown"><a class="dropdown-toggle"
						data-toggle="dropdown" href="#">글씨체<span class="caret"></span></a>
						<ul class="dropdown-menu">
							<s:iterator value="fontList" var="fonts">
							<s:if test='%{#fonts ==shop_blog.blog_font}'>						
								<li><a 	class="blogFont" style="background: aqua;"><s:property /></a></li>
							</s:if>
							<s:else>	
								<li><a 	class="blogFont" ><s:property /></a></li>
							</s:else>												
							</s:iterator>
						</ul> 
					<!-- 배경색 선택-->
					<li class="dropdown"><a class="dropdown-toggle"
						data-toggle="dropdown" href="#">배경색<span class="caret"></span></a>
						<ul class="dropdown-menu">							
							<s:iterator value="colorList" var="colors">
							<s:if test='%{#colors ==shop_blog.blog_bgcolor}'>						
								<li><a 	class="blogColor" style="background: aqua;"><s:property /></a></li>
							</s:if>						
							<s:else>
								<li><a 	class="blogColor" ><s:property /></a></li>
							</s:else>												
							</s:iterator>
						</ul> 
					<!-- 추가기능 선택 -->
					<li class="dropdown"><a class="dropdown-toggle"	data-toggle="dropdown" href="#">옵션<span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<s:if test="%{shop_blog.blog_map ==1}">
								<li><a href="#" id="shopMapOption" style="background: aqua;">상점 지도</a></li>
							</s:if>
							<s:else>
								<li><a href="#" id="shopMapOption">상점 지도</a></li>
							</s:else>
							<s:if test="%{shop_blog.blog_slider ==1}">
								<li><a href="#" id="sliderOption" style="background: aqua;">슬라이드</a></li>
							</s:if>
							<s:else>
								<li><a href="#" id="sliderOption">슬라이드</a></li>
							</s:else>
						</ul>
						<li style="width:auto;"><input type="submit" value="저장" class="btn btn-primary" ></li>
				</ul>				
			</form>		
		</div>		
		<!-- 미리보기 -->
		<div class='preview'>
			<s:include value="blogPreview.jsp"></s:include>
		</div>
	</div>

	<script>
		// 셋업
		$(document).ready(function() {
			$('.preview').css('font-family','${shop_blog.blog_font}');
		});

		// 대문 image 파일 업로드 함수
		function readURL(input) {
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				reader.onload = function(e) {
					$('#shopImg').attr('src', e.target.result);
				}
				reader.readAsDataURL(input.files[0]);
			}
		}
		// 대문 image 미리보기 리스너
		$("#imgInp").change(function() {
			readURL(this);
		});
		
		// 스킨 적용 함수
		$(".blogSkin").click(function(){
			location.href="/Jangdolbaeng2/builder/blogBuilder.action?skin="+$(this).text();
		});

		//image Slider 옵션 추가 함수
		$('#sliderOption').click(function() {
			if ($('#blog\\_slider').val() == 0) {
				$('.imageSlider').removeClass('hide');
				$('#blog\\_slider').attr('value', 1);
				$('#sliderOption').css("background","aqua");
			} else {
				$('.imageSlider').addClass('hide');
				$('#blog_slider').attr('value', 0);
				$('#sliderOption').css("background","");
			}
		});

		//상점 Map 옵션 추가 함수
		$('#shopMapOption').click(function() {
			if ($('#blog\\_map').val()==0) {
				$('#blogMap').removeClass('hide');
				$('#blog_map').attr('value', 1);
				$('#shopMapOption').css("background","aqua");
			} else {
				$('#blogMap').addClass('hide');
				$('#blog\\_map').attr('value', 0);
				$('#shopMapOption').css("background","");
			}
		});
		
		//배경색 지정
		$('.blogColor').click(
				function(){
					$('.preview').css('background',$(this).text());
					$('#blog\\_bgcolor').val($(this).text());
					$(this).css('background','aqua');
					$('.blogColor').not($(this)).css('background','');
				});
		
		//배경색 지정
		$('.blogFont').click(
				function(){
					$('.preview').css('font-family',$(this).text());
					$('#blog\\_font').attr('value',$(this).text());
					$(this).css('background','aqua');
					$('.blogFont').not($(this)).css('background','');
				});
	</script>
</body>
</html>